<template>
    <ynet-content id="requestPin" :headerInformation="true" :headerMenu="true" class="main-container">
		<div>
			<el-form ref="queryForm" :model="queryForm" class="formEmbedTable mt20" :rules="rules">
				<table>
					<caption>Primary A/C No</caption>
					<tr>
						<td> TBS A/C No.</td>
						<td colspan='2'>
							<el-form-item prop="accNo">
								<el-input v-model="queryForm.accNo" :disabled="true"></el-input>
							</el-form-item>
						</td>					
					</tr>
				</table>
			</el-form>
		</div>
        <div>
                <el-form ref="accInfoDate" :model="accInfoDate" class="formEmbedTable mt20">
                    <table>
                        <caption>Before revision</caption>
                        <tr>
                            <td>Customer Name</td>
                            <td>
                                <el-form-item  prop="accName">
                                    <el-input v-model="accInfoDate.accName" :disabled="true"></el-input>
                                </el-form-item>             
                            </td>
                        </tr> 
                        <tr>
                            <td>TBS A/C Status</td>
                            <td>
                                <el-form-item  prop="accStatus">
                                    <el-select v-model="accInfoDate.accStatus" :disabled="true">
                                        <template v-for="item in actionOptions">
                                            <el-option :label="item.label" :value="item.value"></el-option>
                                        </template>         
                                    </el-select>
                                </el-form-item>             
                            </td>
                        </tr>
                    </table>
                </el-form>
                <el-form ref="changeStatusForm" :model="changeStatusForm" class="formEmbedTable mt20" :rules="rules1">
                    <table>
						<caption>Modified</caption>
                        <tr>
                            <td>Action</td>
                            <td>
                                <el-form-item  prop="action">
                                    <el-select v-model="changeStatusForm.action" :disabled="true">
                                        <template v-for="item in actionOptions">
                                            <el-option :label="item.label" :value="item.value"></el-option>
                                        </template>         
                                    </el-select>
                                </el-form-item>             
                            </td>
                        </tr>

                        <tr>
                            <td>CHANGE_STATUS_REASON</td>
                            <td>
                                <el-form-item  prop="reason">
                                    <el-input v-model="changeStatusForm.reason" :disabled="true"></el-input>
                                </el-form-item>             
                            </td>
                        </tr>
                        	
                    </table>
                </el-form>
                <div class="btnArea mt20 tac">
                    <el-button type="primary" @click="back()">Back</el-button>
                </div>
        </div>
        
        
    </ynet-content>
</template>

<script>
	export default {
		name:'accStateOper_detail',
        props:['toDetailData'],
		components:{
		},
		data(){
            return { 
                main:true,
                actionOptions:[
                    {value:'0',label:'activation'},
                    {value:'1',label:'freeze'},
                    {value:'2',label:'Cancellation'},
                ],
                detailInfo:{},
                queryForm:{
                    accNo:'',
                },
                accInfoDate:{
                    accName:'',
                    accStatus:'',
                    // activeDate:'',
                },
                changeStatusForm:{
                    action:'',
                    reason:'',
                },
            }   
        },
        mounted(){
            let _this = this
            console.log("_this.toDetailData",_this.toDetailData)
            _this.detailInfo = $.extend({}, _this.toDetailData)
            _this.queryForm.accNo = _this.detailInfo.primaryAcc
            _this.accInfoDate.accName = _this.detailInfo.accName
            _this.accInfoDate.accStatus = _this.detailInfo.accStatus
            _this.changeStatusForm.action = _this.detailInfo.action
            _this.changeStatusForm.reason = _this.detailInfo.reason
        },
		methods:{ 
            
            // resetForm(formName){
            //         this.$refs[formName].resetFields();
            // },
		   back(){
                this.$emit('back')
            },
           
            
            
		}
	}
</script>